<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="title">考勤统计</text>
    </view>

    <!-- 时间筛选器 -->
    <view class="time-filter">
      <view class="time-tabs">
        <view 
          v-for="(tab, index) in timeTabs" 
          :key="index" 
          class="tab" 
          :class="{ active: currentTimeTab === index }"
          @tap="switchTimeTab(index)"
        >
          {{ tab.label }}
        </view>
      </view>
      <view class="date-range" v-if="currentTimeTab === 3" @tap="showDatePicker">
        <text>{{ customDateRange }}</text>
        <text class="iconfont icon-calendar"></text>
      </view>
    </view>

    <!-- 考勤概览 -->
    <view class="overview-card">
      <view class="overview-header">
        <text class="title">考勤概览</text>
        <text class="subtitle">{{ timeRangeText }}</text>
      </view>
      <view class="overview-content">
        <view class="overview-item">
          <view class="progress-circle" :style="{ 
            '--value': attendance.attendanceRate, 
            '--color': getAttendanceRateColor(attendance.attendanceRate) 
          }">
            <text class="progress-value">{{ attendance.attendanceRate }}%</text>
          </view>
          <text class="label">出勤率</text>
        </view>
        <view class="overview-item">
          <view class="data-box">
            <text class="data-value">{{ attendance.totalDays }}</text>
            <text class="data-unit">天</text>
          </view>
          <text class="label">应出勤</text>
        </view>
        <view class="overview-item">
          <view class="data-box">
            <text class="data-value">{{ attendance.actualDays }}</text>
            <text class="data-unit">天</text>
          </view>
          <text class="label">实际出勤</text>
        </view>
      </view>
    </view>

    <!-- 考勤分布 -->
    <view class="distribution-card">
      <view class="card-header">
        <text class="title">考勤分布</text>
        <text class="subtitle">{{ timeRangeText }}</text>
      </view>
      <view class="chart-container">
        <!-- 环形图 -->
        <view class="pie-chart">
          <view class="pie-segments">
            <view 
              v-for="(item, index) in pieChartData" 
              :key="index"
              class="pie-segment"
              :style="{ 
                '--start': item.start + 'deg', 
                '--end': item.end + 'deg', 
                '--color': item.color 
              }"
            ></view>
          </view>
          <view class="pie-center">
            <text>总计</text>
            <text>{{ attendance.totalDays }}天</text>
          </view>
        </view>
        
        <!-- 图例 -->
        <view class="chart-legend">
          <view class="legend-item" v-for="(item, index) in distribution" :key="index">
            <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
            <text class="legend-label">{{ item.label }}</text>
            <text class="legend-value">{{ item.value }}天</text>
            <text class="legend-percent">{{ Math.floor(item.value / attendance.totalDays * 100) }}%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 考勤趋势 -->
    <view class="trend-card">
      <view class="card-header">
        <text class="title">考勤趋势</text>
        <text class="subtitle">{{ timeRangeText }}</text>
      </view>
      <view class="chart-tabs">
        <view 
          v-for="(tab, index) in chartTabs" 
          :key="index" 
          class="chart-tab" 
          :class="{ active: currentChartTab === index }"
          @tap="switchChartTab(index)"
        >
          {{ tab }}
        </view>
      </view>
      <view class="bar-chart">
        <view 
          v-for="(item, index) in barChartData" 
          :key="index" 
          class="bar-item"
        >
          <view class="bar-column">
            <view 
              class="bar"
              :style="{ 
                height: item.height + '%', 
                backgroundColor: getBarColor(item.value, index) 
              }"
            ></view>
          </view>
          <text class="bar-label">{{ item.label }}</text>
        </view>
      </view>
      <view class="chart-legend horizontal">
        <view class="legend-item" v-for="(item, index) in barLegend" :key="index">
          <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
          <text class="legend-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 异常考勤明细 -->
    <view class="abnormal-card">
      <view class="card-header">
        <text class="title">异常考勤明细</text>
        <text class="subtitle">{{ timeRangeText }}</text>
      </view>
      <view class="abnormal-list">
        <view class="abnormal-item" v-for="(item, index) in abnormalRecords" :key="index">
          <view class="abnormal-date">
            <text class="date">{{ item.date }}</text>
            <text class="weekday">{{ item.weekday }}</text>
          </view>
          <view class="abnormal-content">
            <text class="abnormal-type">{{ item.type }}</text>
            <text class="abnormal-time">{{ item.time }}</text>
          </view>
          <view class="abnormal-reason">
            <text class="reason-label">原因：</text>
            <text class="reason-text">{{ item.reason || '未填写' }}</text>
          </view>
        </view>
      </view>
      <view class="empty-state" v-if="!abnormalRecords.length">
        <image src="http://101.37.17.240:9000/zhxy/empty-data.png" mode="aspectFit"></image>
        <text>暂无异常考勤记录</text>
      </view>
    </view>

    <!-- 日期范围选择器 -->
    <view class="date-range-picker-mask" v-if="showDateRangePicker" @tap="hideDateRangePicker"></view>
    <view class="date-range-picker" v-if="showDateRangePicker">
      <view class="picker-header">
        <text class="picker-title">选择日期范围</text>
        <text class="picker-close" @tap="hideDateRangePicker">×</text>
      </view>
      <view class="date-inputs">
        <view class="date-input" @tap="showStartDatePicker">
          <text class="date-label">开始日期</text>
          <text class="date-value">{{ customStartDate }}</text>
        </view>
        <text class="date-separator">至</text>
        <view class="date-input" @tap="showEndDatePicker">
          <text class="date-label">结束日期</text>
          <text class="date-value">{{ customEndDate }}</text>
        </view>
      </view>
      <view class="picker-buttons">
        <button class="picker-btn cancel" @tap="hideDateRangePicker">取消</button>
        <button class="picker-btn confirm" @tap="confirmDateRange">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 时间筛选
      currentTimeTab: 1, // 默认选择本月
      timeTabs: [
        { label: '本周', value: 'week' },
        { label: '本月', value: 'month' },
        { label: '本季度', value: 'quarter' },
        { label: '自定义', value: 'custom' }
      ],
      customStartDate: '2023-05-01',
      customEndDate: '2023-05-31',
      customDateRange: '2023-05-01 至 2023-05-31',
      showDateRangePicker: false,
      
      // 图表类型
      currentChartTab: 0, // 默认选择出勤情况
      chartTabs: ['出勤情况', '迟到情况', '早退情况'],
      
      // 考勤数据
      attendance: {
        totalDays: 22,
        actualDays: 20,
        attendanceRate: 91
      },
      
      // 考勤分布数据
      distribution: [
        { label: '正常', value: 18, color: '#4caf50' },
        { label: '迟到', value: 2, color: '#ff9800' },
        { label: '早退', value: 1, color: '#2196f3' },
        { label: '旷工', value: 0, color: '#f44336' },
        { label: '请假', value: 1, color: '#9c27b0' }
      ],
      
      // 柱状图数据
      barChartData: [
        { label: '周一', value: 1, height: 100 },
        { label: '周二', value: 1, height: 100 },
        { label: '周三', value: 0.9, height: 90 },
        { label: '周四', value: 1, height: 100 },
        { label: '周五', value: 0.8, height: 80 },
        { label: '周六', value: 0, height: 0 },
        { label: '周日', value: 0, height: 0 }
      ],
      
      // 柱状图图例
      barLegend: [
        { label: '正常', color: '#4caf50' },
        { label: '异常', color: '#ff9800' },
        { label: '缺勤', color: '#f44336' }
      ],
      
      // 异常考勤记录
      abnormalRecords: [
        {
          date: '2023-05-05',
          weekday: '周五',
          type: '迟到',
          time: '08:52',
          reason: '交通拥堵'
        },
        {
          date: '2023-05-04',
          weekday: '周四',
          type: '早退',
          time: '17:05',
          reason: '家中有事'
        },
        {
          date: '2023-05-02',
          weekday: '周二',
          type: '请假',
          time: '全天',
          reason: '生病就医'
        }
      ]
    }
  },
  computed: {
    // 时间范围文本
    timeRangeText() {
      const tabMap = {
        0: '本周',
        1: '本月',
        2: '本季度',
        3: this.customDateRange
      }
      return tabMap[this.currentTimeTab]
    },
    
    // 环形图数据计算
    pieChartData() {
      let startAngle = 0
      const result = []
      const total = this.distribution.reduce((sum, item) => sum + item.value, 0)
      
      this.distribution.forEach(item => {
        if (item.value > 0) {
          const percentage = item.value / total
          const degrees = percentage * 360
          const endAngle = startAngle + degrees
          
          result.push({
            start: startAngle,
            end: endAngle,
            color: item.color
          })
          
          startAngle = endAngle
        }
      })
      
      return result
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    // 切换时间筛选
    switchTimeTab(index) {
      this.currentTimeTab = index
      
      // 模拟加载数据
      this.loadAttendanceData(this.timeTabs[index].value)
    },
    
    // 切换图表类型
    switchChartTab(index) {
      this.currentChartTab = index
      
      // 模拟不同图表数据
      if (index === 0) { // 出勤情况
        this.barChartData = [
          { label: '周一', value: 1, height: 100 },
          { label: '周二', value: 1, height: 100 },
          { label: '周三', value: 0.9, height: 90 },
          { label: '周四', value: 1, height: 100 },
          { label: '周五', value: 0.8, height: 80 },
          { label: '周六', value: 0, height: 0 },
          { label: '周日', value: 0, height: 0 }
        ]
      } else if (index === 1) { // 迟到情况
        this.barChartData = [
          { label: '周一', value: 0, height: 0 },
          { label: '周二', value: 0, height: 0 },
          { label: '周三', value: 0.1, height: 20 },
          { label: '周四', value: 0, height: 0 },
          { label: '周五', value: 0.2, height: 40 },
          { label: '周六', value: 0, height: 0 },
          { label: '周日', value: 0, height: 0 }
        ]
      } else { // 早退情况
        this.barChartData = [
          { label: '周一', value: 0, height: 0 },
          { label: '周二', value: 0, height: 0 },
          { label: '周三', value: 0, height: 0 },
          { label: '周四', value: 0.1, height: 20 },
          { label: '周五', value: 0, height: 0 },
          { label: '周六', value: 0, height: 0 },
          { label: '周日', value: 0, height: 0 }
        ]
      }
    },
    
    // 获取柱状图颜色
    getBarColor(value, index) {
      if (value === 0) return '#f5f5f5'
      if (value === 1) return '#4caf50'
      return '#ff9800'
    },
    
    // 获取出勤率颜色
    getAttendanceRateColor(rate) {
      if (rate >= 90) return '#4caf50'
      if (rate >= 80) return '#ff9800'
      return '#f44336'
    },
    
    // 显示日期范围选择器
    showDatePicker() {
      this.showDateRangePicker = true
    },
    
    // 隐藏日期范围选择器
    hideDateRangePicker() {
      this.showDateRangePicker = false
    },
    
    // 显示开始日期选择器
    showStartDatePicker() {
      uni.showToast({
        title: '此处应显示日期选择器',
        icon: 'none'
      })
    },
    
    // 显示结束日期选择器
    showEndDatePicker() {
      uni.showToast({
        title: '此处应显示日期选择器',
        icon: 'none'
      })
    },
    
    // 确认日期范围
    confirmDateRange() {
      this.customDateRange = `${this.customStartDate} 至 ${this.customEndDate}`
      this.hideDateRangePicker()
      
      // 模拟加载数据
      this.loadAttendanceData('custom')
    },
    
    // 加载考勤数据（模拟）
    loadAttendanceData(timeRange) {
      uni.showLoading({
        title: '加载中...'
      })
      
      // 模拟网络请求延迟
      setTimeout(() => {
        // 实际应用中应该调用API获取数据
        // 这里只是简单模拟不同时间段的数据变化
        if (timeRange === 'week') {
          this.attendance = {
            totalDays: 5,
            actualDays: 5,
            attendanceRate: 100
          }
          
          this.distribution = [
            { label: '正常', value: 5, color: '#4caf50' },
            { label: '迟到', value: 0, color: '#ff9800' },
            { label: '早退', value: 0, color: '#2196f3' },
            { label: '旷工', value: 0, color: '#f44336' },
            { label: '请假', value: 0, color: '#9c27b0' }
          ]
          
          this.abnormalRecords = []
        } else if (timeRange === 'month') {
          this.attendance = {
            totalDays: 22,
            actualDays: 20,
            attendanceRate: 91
          }
          
          this.distribution = [
            { label: '正常', value: 18, color: '#4caf50' },
            { label: '迟到', value: 2, color: '#ff9800' },
            { label: '早退', value: 1, color: '#2196f3' },
            { label: '旷工', value: 0, color: '#f44336' },
            { label: '请假', value: 1, color: '#9c27b0' }
          ]
          
          this.abnormalRecords = [
            {
              date: '2023-05-05',
              weekday: '周五',
              type: '迟到',
              time: '08:52',
              reason: '交通拥堵'
            },
            {
              date: '2023-05-04',
              weekday: '周四',
              type: '早退',
              time: '17:05',
              reason: '家中有事'
            },
            {
              date: '2023-05-02',
              weekday: '周二',
              type: '请假',
              time: '全天',
              reason: '生病就医'
            }
          ]
        } else if (timeRange === 'quarter') {
          this.attendance = {
            totalDays: 65,
            actualDays: 58,
            attendanceRate: 89
          }
          
          this.distribution = [
            { label: '正常', value: 52, color: '#4caf50' },
            { label: '迟到', value: 4, color: '#ff9800' },
            { label: '早退', value: 2, color: '#2196f3' },
            { label: '旷工', value: 1, color: '#f44336' },
            { label: '请假', value: 6, color: '#9c27b0' }
          ]
          
          this.abnormalRecords = [
            {
              date: '2023-05-05',
              weekday: '周五',
              type: '迟到',
              time: '08:52',
              reason: '交通拥堵'
            },
            {
              date: '2023-05-04',
              weekday: '周四',
              type: '早退',
              time: '17:05',
              reason: '家中有事'
            },
            {
              date: '2023-05-02',
              weekday: '周二',
              type: '请假',
              time: '全天',
              reason: '生病就医'
            },
            {
              date: '2023-04-15',
              weekday: '周六',
              type: '旷工',
              time: '全天',
              reason: '忘记打卡'
            },
            {
              date: '2023-04-10',
              weekday: '周一',
              type: '迟到',
              time: '09:05',
              reason: '堵车'
            }
          ]
        } else {
          // 自定义时间范围，这里简化处理
          this.attendance = {
            totalDays: 22,
            actualDays: 20,
            attendanceRate: 91
          }
          
          this.distribution = [
            { label: '正常', value: 18, color: '#4caf50' },
            { label: '迟到', value: 2, color: '#ff9800' },
            { label: '早退', value: 1, color: '#2196f3' },
            { label: '旷工', value: 0, color: '#f44336' },
            { label: '请假', value: 1, color: '#9c27b0' }
          ]
        }
        
        // 重置图表选项
        this.currentChartTab = 0
        this.switchChartTab(0)
        
        uni.hideLoading()
      }, 500)
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f6f7fb;
  padding-bottom: 30rpx;
}

.header {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #4080ff;
  padding: 0 30rpx;
  color: #fff;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 40rpx;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    padding-right: 60rpx; // 平衡左侧返回按钮的宽度
  }
}

.time-filter {
  background: #fff;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  
  .time-tabs {
    display: flex;
    border: 1rpx solid #4080ff;
    border-radius: 8rpx;
    overflow: hidden;
    
    .tab {
      flex: 1;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #4080ff;
      background: #fff;
      position: relative;
      
      &.active {
        color: #fff;
        background: #4080ff;
      }
      
      &:not(:last-child):after {
        content: '';
        position: absolute;
        right: 0;
        top: 15rpx;
        bottom: 15rpx;
        width: 1rpx;
        background: #4080ff;
      }
    }
  }
  
  .date-range {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;
    padding: 15rpx 0;
    font-size: 26rpx;
    color: #4080ff;
    
    .iconfont {
      margin-left: 10rpx;
    }
  }
}

.card-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .subtitle {
    font-size: 24rpx;
    color: #999;
    margin-top: 6rpx;
  }
}

.overview-card {
  margin: 0 30rpx 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .overview-header {
    margin-bottom: 30rpx;
  }
  
  .overview-content {
    display: flex;
    justify-content: space-around;
    
    .overview-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .progress-circle {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
                  conic-gradient(var(--color) calc(var(--value) * 1%), #e0e0e0 0);
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .progress-value {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
      }
      
      .data-box {
        height: 140rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .data-value {
          font-size: 48rpx;
          font-weight: bold;
          color: #333;
        }
        
        .data-unit {
          font-size: 24rpx;
          color: #999;
          margin-left: 4rpx;
          align-self: flex-end;
          margin-bottom: 10rpx;
        }
      }
      
      .label {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

.distribution-card, .trend-card, .abnormal-card {
  margin: 0 30rpx 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.chart-container {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  
  .pie-chart {
    width: 220rpx;
    height: 220rpx;
    position: relative;
    margin-right: 40rpx;
    
    .pie-segments {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      
      .pie-segment {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-origin: 50% 50%;
        background: conic-gradient(var(--color) var(--start), var(--color) var(--end), transparent var(--end));
      }
    }
    
    .pie-center {
      position: absolute;
      width: 60%;
      height: 60%;
      background: #fff;
      border-radius: 50%;
      top: 20%;
      left: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      text {
        font-size: 24rpx;
        color: #999;
        
        &:last-child {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
        }
      }
    }
  }
  
  .chart-legend {
    flex: 1;
    
    .legend-item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .legend-color {
        width: 24rpx;
        height: 24rpx;
        border-radius: 4rpx;
        margin-right: 16rpx;
      }
      
      .legend-label {
        width: 80rpx;
        font-size: 26rpx;
        color: #333;
      }
      
      .legend-value {
        width: 80rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #333;
        margin-right: 10rpx;
      }
      
      .legend-percent {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    &.horizontal {
      display: flex;
      justify-content: center;
      margin-top: 20rpx;
      
      .legend-item {
        margin: 0 20rpx;
      }
    }
  }
}

.chart-tabs {
  display: flex;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 30rpx;
  
  .chart-tab {
    padding: 15rpx 30rpx;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #4080ff;
      
      &:after {
        content: '';
        position: absolute;
        left: 30rpx;
        right: 30rpx;
        bottom: 0;
        height: 4rpx;
        background: #4080ff;
        border-radius: 2rpx;
      }
    }
  }
}

.bar-chart {
  height: 400rpx;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  border-bottom: 1rpx solid #e0e0e0;
  margin-bottom: 20rpx;
  
  .bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 12%;
    
    .bar-column {
      width: 100%;
      height: 300rpx;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      
      .bar {
        width: 60%;
        background: #4caf50;
        transition: height 0.3s ease;
      }
    }
    
    .bar-label {
      margin-top: 16rpx;
      font-size: 24rpx;
      color: #999;
    }
  }
}

.abnormal-list {
  .abnormal-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .abnormal-date {
      display: flex;
      align-items: baseline;
      margin-bottom: 16rpx;
      
      .date {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-right: 16rpx;
      }
      
      .weekday {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .abnormal-content {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      
      .abnormal-type {
        padding: 4rpx 16rpx;
        background: rgba(244, 67, 54, 0.1);
        color: #f44336;
        font-size: 24rpx;
        border-radius: 4rpx;
        margin-right: 16rpx;
      }
      
      .abnormal-time {
        font-size: 26rpx;
        color: #333;
      }
    }
    
    .abnormal-reason {
      display: flex;
      
      .reason-label {
        font-size: 24rpx;
        color: #999;
      }
      
      .reason-text {
        flex: 1;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50rpx 0;
  
  image {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 26rpx;
    color: #999;
  }
}

// 日期范围选择器
.date-range-picker-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.date-range-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600rpx;
  background: #fff;
  border-radius: 12rpx;
  z-index: 101;
  
  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .picker-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .picker-close {
      font-size: 40rpx;
      color: #999;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .date-inputs {
    padding: 30rpx;
    
    .date-input {
      display: flex;
      flex-direction: column;
      border: 1rpx solid #e0e0e0;
      border-radius: 8rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      
      .date-label {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 10rpx;
      }
      
      .date-value {
        font-size: 28rpx;
        color: #333;
      }
    }
    
    .date-separator {
      display: block;
      text-align: center;
      font-size: 28rpx;
      color: #999;
      margin-bottom: 20rpx;
    }
  }
  
  .picker-buttons {
    display: flex;
    border-top: 1rpx solid #f0f0f0;
    
    .picker-btn {
      flex: 1;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      font-size: 30rpx;
      
      &.cancel {
        color: #666;
        border-right: 1rpx solid #f0f0f0;
      }
      
      &.confirm {
        color: #4080ff;
        font-weight: bold;
      }
    }
  }
}
</style> 